<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    react.js的核心文件, 支持react语法-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!--    react-dom.js 支持react有关的DOM操作-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!--    jsx-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
    let app=document.getElementById('app');
    function clock(){
/*
let h1el=document.createElement('h1')
        let divel=document.createElement('div')
        app.appendChild(divel);
divel.appendChild(h1el);
let  nowTime=new Data().toLocaleTimeString();
        h1el.innerHTML='time is'+nowTime;
        */
 //       class类组件写法
 /*   let {Component}=React;
    class Element extends Component{
        render() {
            return <div>
                <h1>time is</h1>
                 <h2>{new Date().toLocaleTimeString()}</h2>
            </div>
        }
    }
    ReactDOM.render(<Element/>,app)*/
    }
    function   Element() {
        return <div>
            <h1>time is</h1>
            <h2>{new Date().toLocaleTimeString()}</h2>
        </div>
    }
    ReactDOM.render(Element,app);
    setInterval(clock,1000)

</script>